<template>
  <div>
    <el-row style="padding: 5px; ">
      <el-button type="primary" @click="saveDataAction">保存</el-button>
      <el-button type="primary" v-show="isDisabled" @click="isEditAction(1)">打开编辑</el-button>
      <el-button type="primary" v-show="!isDisabled" @click="isEditAction(2)">关闭编辑</el-button>
    </el-row>
    <div class="super-flow-base-demo">

      <super-flow
        ref="superFlow"
        :node-list="nodeList"
        :link-list="linkList"
        :origin="origin"
        :graph-menu="graphMenuList"
        :node-menu="nodeMenuList"
        :link-menu="linkMenuList"
        :enter-intercept="enterIntercept"
        :output-intercept="outputIntercept"
        :link-desc="linkDesc">
        <template v-slot:node="{meta}">
          <div :class="`flow-node flow-node-${meta.nodeType}`">
            <header class="ellipsis">
              {{ meta.workLinkName }}
            </header>
            <section>
              <div class="sectionDiv">
                <span class="sectionSpan">节点编码:</span>
                <el-input :disabled="isDisabled" v-model="meta.workLinkCode"></el-input>
              </div>
              <div class="sectionDiv">
                <span class="sectionSpan">环节名称:</span>
                <el-input :disabled="isDisabled" v-model="meta.workStageName"></el-input>
              </div>
              <div class="sectionDiv">
                <span class="sectionSpan">环节编码:</span>
                <el-input :disabled="isDisabled" v-model="meta.workStageCode"></el-input>
              </div>
            </section>
          </div>
        </template>
      </super-flow>

      <el-dialog
        :title="drawerConf.title"
        :visible.sync="drawerConf.visible"
        :close-on-click-modal="false"
        width="500px">
        <el-form
          @keyup.native.enter="settingSubmit"
          @submit.native.prevent
          v-show="drawerConf.type === drawerType.node"
          ref="nodeSetting"
          :model="nodeSetting">
          <el-form-item
            label="节点名称"
            prop="workLinkName">
            <el-input
              v-model="nodeSetting.workLinkName"
              placeholder="请输入节点名称"
              maxlength="30">
            </el-input>
          </el-form-item>
          <el-form-item
            label="节点编码"
            prop="workLinkCode">
            <el-input
              v-model="nodeSetting.workLinkCode"
              placeholder="请输入节点编码"
              maxlength="30">
            </el-input>
          </el-form-item>
          <el-form-item
            label="环节名称"
            prop="workStageName">
            <el-input
              v-model="nodeSetting.workStageName"
              placeholder="请输入环节名称"
              maxlength="30">
            </el-input>
          </el-form-item>
          <el-form-item
            label="环节编码"
            prop="workStageCode">
            <el-input
              v-model="nodeSetting.workStageCode"
              placeholder="请输入环节编码"
              maxlength="30">
            </el-input>
          </el-form-item>

          <el-form-item
            label="流程滚动信号"
            prop="closeSignal">
            <el-input
              v-model="nodeSetting.closeSignal"
              placeholder="请输入流程滚动信号"
              maxlength="30">
            </el-input>
          </el-form-item>

          <el-form-item
            v-show="nodeSetting.nodeType == 'condition'"
            label="网关内容"
            prop="conditionContent">
            <el-input
              type="textarea"
              rows="10"
              v-model="nodeSetting.conditionContent"
              placeholder="网关内容"
              maxlength="30000">
            </el-input>
          </el-form-item>


        </el-form>
        <el-form
          @keyup.native.enter="settingSubmit"
          @submit.native.prevent
          v-show="drawerConf.type === drawerType.link"
          ref="linkSetting"
          :model="linkSetting">
          <el-form-item
            label="连线描述"
            prop="lineDesc">
            <el-input
              v-model="linkSetting.lineDesc"
              placeholder="请输入连线描述">
            </el-input>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer">
        <el-button
          @click="drawerConf.cancel">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="settingSubmit">
          确 定
        </el-button>
      </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import * as api from './api'
import {detailWorkFlowInfo, saveWorkFlow} from "./api";

const drawerType = {
  node: 0,
  link: 1
}

export default {
  data() {
    return {
      drawerType,
      isDisabled: true,
      loading: true,
      drawerConf: {
        title: '',
        visible: false,
        type: null,
        info: null,
        open: (type, info) => {
          const conf = this.drawerConf
          conf.visible = true
          conf.type = type
          conf.info = info
          if (conf.type === drawerType.node) {
            conf.title = '节点'
            if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields()
            this.$set(this.nodeSetting, 'workStageName', info.meta.workStageName)
            this.$set(this.nodeSetting, 'workStageCode', info.meta.workStageCode)
            this.$set(this.nodeSetting, 'workLinkName', info.meta.workLinkName)
            this.$set(this.nodeSetting, 'workLinkCode', info.meta.workLinkCode)
            this.$set(this.nodeSetting, 'conditionContent', info.meta.conditionContent)
            this.$set(this.nodeSetting, 'nodeType', info.meta.nodeType)
            this.$set(this.nodeSetting, 'closeSignal', info.meta.closeSignal)
            console.log(info.meta)
          } else {
            conf.title = '连线'
            if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields()
            this.$set(this.linkSetting, 'lineDesc', info.meta ? info.meta.lineDesc : '')
          }
        },
        cancel: () => {
          this.drawerConf.visible = false
          if (this.drawerConf.type === drawerType.node) {
            this.$refs.nodeSetting.clearValidate()
          } else {
            this.$refs.linkSetting.clearValidate()
          }
        }
      },
      linkSetting: {
        lineDesc: ''
      },
      nodeSetting: {
        workLinkName: '',
        workLinkCode: '',
        conditionContent: '',
        workStageCode: '',
        workStageName: '',
        nodeType: '',
        closeSignal: ''
      },
      origin: [958, 500],
      nodeList: [],
      linkList: [],
      graphMenuList: [
        [
          {
            label: '开始节点',
            disable(graph) {
              return !!graph.nodeList.find(node => node.meta.nodeType === 'start')
            },
            selected: (graph, coordinate) => {
              const start = graph.nodeList.find(node => node.meta.nodeType === 'start')
              if (!start) {
                graph.addNode({
                  width: 250,
                  height: 140,
                  coordinate: coordinate,
                  meta: {
                    nodeType: 'start',
                    name: '开始节点'
                  }
                })
              }
            }
          },
          {
            label: '条件节点',
            disable: false,
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 250,
                height: 140,
                coordinate: coordinate,
                meta: {
                  nodeType: 'condition',
                  name: '条件节点'
                }
              })
            }
          },
          {
            label: '审批节点',
            disable: false,
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 250,
                height: 140,
                coordinate: coordinate,
                meta: {
                  nodeType: 'approval',
                  name: '审批节点'
                }
              })
            }
          },
          {
            label: '抄送节点',
            disable: false,
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 150,
                height: 140,
                coordinate: coordinate,
                meta: {
                  nodeType: 'cc',
                  name: '抄送节点'
                }
              })
            }
          },
          {
            label: '结束节点',
            disable(graph) {
              return !!graph.nodeList.find(point => point.meta.nodeType === 'end')
            },
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 250,
                height: 140,
                coordinate: coordinate,
                meta: {
                  nodeType: 'end',
                  name: '结束节点'
                }
              })
            }
          }
        ],
        [
          {
            label: '打印数据',
            selected: (graph, coordinate) => {
              console.log(JSON.stringify(graph.toJSON(), null, 2))
            }
          },
          {
            label: '全选',
            selected: (graph, coordinate) => {
              graph.selectAll()
            }
          }
        ]
      ],
      nodeMenuList: [
        [
          {
            label: '删除',
            disable: false,
            hidden(node) {
              return node.meta.nodeType === 'start'
            },
            selected(node, coordinate) {
              node.remove()
            }
          }
        ],
        [
          {
            label: '编辑',
            selected: (node, coordinate) => {
              this.drawerConf.open(drawerType.node, node)
            }
          }
        ]
      ],
      linkMenuList: [
        [
          {
            label: '删除',
            disable: false,
            selected: (link, coordinate) => {
              link.remove()
            }
          }
        ],
        [
          {
            label: '编辑',
            disable: false,
            selected: (link, coordinate) => {
              this.drawerConf.open(drawerType.link, link)
            }
          }
        ]
      ]
    }
  },
  created() {
    api.detailWorkFlowInfo({"busiParamId": "4281b693cac444aa9b70463338e5140b"}).then(res => {
      if (200 === res.code) {
        this.nodeList = res.data.nodeList
        this.linkList = res.data.linkList
      }
    }).catch(() => {
    })

    //
    // const nodeList = [
    //   {
    //     "id": "nodeqVDerGGzIiEisyJ2",
    //     "width": "160",
    //     "height": "80",
    //     "coordinate": [
    //       -418,
    //       -216
    //     ],
    //     "meta": {
    //       "prop": "condition",
    //       "name": "是否集体讨论",
    //       "conditionSql": "是否集体讨论"
    //     }
    //   },
    //   {
    //     "id": "node14NB9vbGZdsxWj7A",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -132.5,
    //       -216
    //     ],
    //     "meta": {
    //       "prop": "approval",
    //       "name": "集体讨论"
    //     }
    //   },
    //   {
    //     "id": "nodeUDyNI0jyJB9Dbl8o",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -265.5,
    //       79.421875
    //     ],
    //     "meta": {
    //       "prop": "current",
    //       "name": "不予处罚告知"
    //     }
    //   },
    //   {
    //     "id": "nodeZ9XcbtSfoQUL4jvr",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -581,
    //       196.421875
    //     ],
    //     "meta": {
    //       "prop": "approval",
    //       "name": "予以处罚送达"
    //     }
    //   },
    //   {
    //     "id": "nodeuotX8WKIZ0eh2m3x",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -265.5,
    //       196.421875
    //     ],
    //     "meta": {
    //       "prop": "approval",
    //       "name": "不予处罚送达"
    //     }
    //   },
    //   {
    //     "id": "nodeSWvO3X7XbL3CyuTW",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -581,
    //       314.421875
    //     ],
    //     "meta": {
    //       "prop": "approval",
    //       "name": "是否陈述申辩"
    //     }
    //   },
    //   {
    //     "id": "node7Ox3Hc2b2laGnnc3",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -581,
    //       428.421875
    //     ],
    //     "meta": {
    //       "prop": "approval",
    //       "name": "处罚决定"
    //     }
    //   },
    //   {
    //     "id": "nodeMJly5q0UCZz19FhW",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -581,
    //       544.421875
    //     ],
    //     "meta": {
    //       "prop": "approval",
    //       "name": "处罚执行"
    //     }
    //   },
    //   {
    //     "id": "node2k0hBVaPrRpEAzrb",
    //     "width": 80,
    //     "height": 50,
    //     "coordinate": [
    //       -378,
    //       675.421875
    //     ],
    //     "meta": {
    //       "prop": "end",
    //       "name": "结案"
    //     }
    //   },
    //   {
    //     "id": "nodeez7F6iRmFs722Nes",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -418,
    //       -90
    //     ],
    //     "meta": {
    //       "prop": "condition",
    //       "name": "是否处罚",
    //       "conditionSql": "是否处罚"
    //     }
    //   },
    //   {
    //     "id": "nodeZBK0ZPpgMe1exezE",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -418,
    //       -337
    //     ],
    //     "meta": {
    //       "prop": "approval",
    //       "name": "调查取证"
    //     }
    //   },
    //   {
    //     "id": "nodeS3WgFnzCI15X58Qw",
    //     "width": 100,
    //     "height": 80,
    //     "coordinate": [
    //       -388,
    //       -480
    //     ],
    //     "meta": {
    //       "prop": "start",
    //       "name": "立案"
    //     }
    //   },
    //   {
    //     "id": "node5hKlSUICSvtZoJ2R",
    //     "width": 160,
    //     "height": 80,
    //     "coordinate": [
    //       -581,
    //       79.421875
    //     ],
    //     "meta": {
    //       "prop": "approval",
    //       "name": "予以处罚告知"
    //     }
    //   }
    // ];
    // const linkList = [
    //   {
    //     "id": "linkyuowFuREjv77g8Jv",
    //     "startId": "nodeZBK0ZPpgMe1exezE",
    //     "endId": "nodeqVDerGGzIiEisyJ2",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": null
    //   },
    //   {
    //     "id": "linkwuVuD2lxn0Oe36zF",
    //     "startId": "nodeqVDerGGzIiEisyJ2",
    //     "endId": "nodeez7F6iRmFs722Nes",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": {
    //       "desc": "否"
    //     }
    //   },
    //   {
    //     "id": "linkQmrzaawDJVfXtYbC",
    //     "startId": "node5hKlSUICSvtZoJ2R",
    //     "endId": "nodeZ9XcbtSfoQUL4jvr",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": null
    //   },
    //   {
    //     "id": "linkxfuXyNRQZzH5iZcr",
    //     "startId": "nodeZ9XcbtSfoQUL4jvr",
    //     "endId": "nodeSWvO3X7XbL3CyuTW",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": null
    //   },
    //   {
    //     "id": "linkKdEYDBA7cvqWusXF",
    //     "startId": "nodeSWvO3X7XbL3CyuTW",
    //     "endId": "node7Ox3Hc2b2laGnnc3",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": null
    //   },
    //   {
    //     "id": "linkyUrivw3UB9LtbWYm",
    //     "startId": "node7Ox3Hc2b2laGnnc3",
    //     "endId": "nodeMJly5q0UCZz19FhW",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": null
    //   },
    //   {
    //     "id": "linkAHYNifYbzziPBqdH",
    //     "startId": "nodeMJly5q0UCZz19FhW",
    //     "endId": "node2k0hBVaPrRpEAzrb",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       40,
    //       0
    //     ],
    //     "meta": null
    //   },
    //   {
    //     "id": "linkVOBULMmlOcGw9vur",
    //     "startId": "nodeqVDerGGzIiEisyJ2",
    //     "endId": "node14NB9vbGZdsxWj7A",
    //     "startAt": [
    //       160,
    //       40
    //     ],
    //     "endAt": [
    //       0,
    //       40
    //     ],
    //     "meta": {
    //       "desc": "是"
    //     }
    //   },
    //   {
    //     "id": "linko7YafHOOtJUvONof",
    //     "startId": "nodeez7F6iRmFs722Nes",
    //     "endId": "node5hKlSUICSvtZoJ2R",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": {
    //       "desc": "处罚"
    //     }
    //   },
    //   {
    //     "id": "link28FHbUQ9xV6WKzxc",
    //     "startId": "nodeS3WgFnzCI15X58Qw",
    //     "endId": "nodeZBK0ZPpgMe1exezE",
    //     "startAt": [
    //       50,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": null
    //   },
    //   {
    //     "id": "linkI2gu9IEk60wPsy4P",
    //     "startId": "nodeuotX8WKIZ0eh2m3x",
    //     "endId": "node2k0hBVaPrRpEAzrb",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       25
    //     ],
    //     "meta": null
    //   },
    //   {
    //     "id": "linkNtIEWP32uqFfB829",
    //     "startId": "nodeUDyNI0jyJB9Dbl8o",
    //     "endId": "nodeuotX8WKIZ0eh2m3x",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": null
    //   },
    //   {
    //     "id": "linkCLPrctciOzFWXCXj",
    //     "startId": "nodeez7F6iRmFs722Nes",
    //     "endId": "nodeUDyNI0jyJB9Dbl8o",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     "endAt": [
    //       80,
    //       0
    //     ],
    //     "meta": {
    //       "desc": "不予处罚"
    //     }
    //   },
    //   {
    //     "id": "link1gTPZpr7Qu9pP3By",
    //     "startId": "node14NB9vbGZdsxWj7A",
    //     "endId": "nodeez7F6iRmFs722Nes",
    //     "startAt": [
    //       80,
    //       80
    //     ],
    //     color: 'firebrick',
    //     "endAt": [
    //       160,
    //       40
    //     ]
    //   }
    // ];

    // setTimeout(() => {
    //   this.nodeList = nodeList
    //   this.linkList = linkList
    // }, 100)
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.scrollBy({
        left: (this.$el.scrollWidth - this.$el.clientWidth) / 2,
        top: (this.$el.scrollHeight - this.$el.clientHeight) / 2
      })
    })
  },
  methods: {
    isEditAction(num) {
      if (num === 1) {
        this.isDisabled = false
      }
      if (num === 2) {
        this.isDisabled = true
      }
    },
    saveDataAction() {
      console.log('保存数据')
      // 获取graph实例
      const graph = this.$refs.superFlow
      // 打印graph的完整数据
      if (!this.loading) {
        return;
      }
      this.loading = false;
      api.saveWorkFlow({"nodeList": graph.toJSON().nodeList, "linkList": graph.toJSON().linkList}).then(res => {
        if (200 === res.code) {
          this.loading = true
          this.$message({
            // message: res.msg,
            message: '保存成功',
            type: 'success'
          })

        }
      }).catch(() => {
        this.loading = false
      })
    },
    enterIntercept(formNode, toNode, graph) {
      const formType = formNode.meta.nodeType
      switch (toNode.meta.nodeType) {
        case 'start':
          return false
        case 'approval':
          return [
            'start',
            'approval',
            'condition',
            'cc'
          ].includes(formType)
        case 'condition':
          return [
            'start',
            'approval',
            'condition',
            'cc'
          ].includes(formType)
        case 'end':
          return [
            'approval',
            'cc'
          ].includes(formType)
        default:
          return true
      }
    },
    outputIntercept(node, graph) {
      return !(node.meta.nodeType === 'end')
    },
    linkDesc(link) {
      return link.meta ? link.meta.lineDesc : ''
    },
    settingSubmit() {
      const conf = this.drawerConf
      if (this.drawerConf.type === drawerType.node) {
        if (!conf.info.meta) conf.info.meta = {}
        Object.keys(this.nodeSetting).forEach(key => {
          this.$set(conf.info.meta, key, this.nodeSetting[key])
        })
        this.$refs.nodeSetting.resetFields()
      } else {
        if (!conf.info.meta) conf.info.meta = {}
        Object.keys(this.linkSetting).forEach(key => {
          this.$set(conf.info.meta, key, this.linkSetting[key])
        })
        this.$refs.linkSetting.resetFields()
      }
      conf.visible = false
    }
  }
}
</script>

<style>
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}

/* 默认节点边框（轻微区分）
.flow-node {
  border: 1px solid transparent;
  border-radius: 4px;
}*/

/* 选中状态：紫色外边框
.super-flow__node.selected > .flow-node,
.super-flow__node.is-selected > .flow-node {
  border-color: #9b59b6 !important;
  box-shadow: 0 0 6px rgba(155, 89, 182, 0.6);
}
*/


.super-flow-base-demo {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #f5f5f5;
  overflow: scroll;


  .super-flow {
    width: 3000px;
    height: 3000px;
  }

  .super-flow__node {
    .flow-node {
      > header {
        font-size: 14px;
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        color: #ffffff;
      }

      > section {
        text-align: center;
        line-height: 20px;
        overflow: hidden;
        padding: 6px 12px;
        word-break: break-all;
      }

      &.flow-node-start {
        > header {
          background-color: #55abfc;
        }
      }

      &.flow-node-condition {
        > header {
          background-color: #DC0909;
        }
      }

      &.flow-node-approval {
        > header {
          background-color: rgba(188, 181, 58, 0.76);
        }
      }

      &.flow-node-current {
        > header {
          background-color: rgba(139, 92, 246, 0.80);
        }
      }

      &.flow-node-cc {
        > header {
          background-color: #30b95c;
        }
      }

      &.flow-node-end {
        > header {
          //height: 50px;
          //line-height: 50px;
          background-color: rgb(0, 0, 0);
        }
      }
    }
  }
}

.sectionDiv {
  display: flex;
  align-items: start;
  line-height: 28px;
  padding: 1px 0
}

.sectionSpan {
  font-size: 8px;
  width: 80px;
}
</style>
